<template>
  <div class="container">
    <div class="index-page">

      <div class="first-style card-style" v-if="userInfo.style == 0">
        <div class="lbg">
          <img class="image" src="/static/images/first-bg.jpg" alt="">
        </div>
        <div class="wrapper">
          <div class="user">
            <div class="bg">
              <img class="image" src="/static/images/card/1_p_2.jpg" alt="">
            </div>
            <div class="nick">
              <div class="name">{{ userInfo.name || userInfo.nickName || '未知' }}</div>
              <div class="job">{{ company.title }}</div>
            </div>
            <div class="company-name">{{ company.name }}</div>
            <div class="logo">
              <img mode="widthFix" class="image" :src="company.logo || logo" alt="">
            </div>
            <ul class="info-list">
              <li class="item" @click="callPhone(1)">
                <div class="icon">
                  <img class="image" src="/static/images/icon/phone.png" alt="">
                </div>
                <div class="text">{{ userInfo.mobile || '未填写' }}</div>
              </li>
              <li class="item" @click="setClipboard">
                <div class="icon">
                  <img class="image" src="/static/images/icon/wechat.png" alt="">
                </div>
                <div class="text">{{ userInfo.wx_code || '未填写' }}</div>
              </li>
              <li class="item" @click="openMap">
                <div class="icon">
                  <img class="image" src="/static/images/icon/position.png" alt="">
                </div>
                <div class="text">{{ userInfo.address || '未填写' }}</div>
              </li>
            </ul>
          </div>
          <div class="user">
            <div class="bg">
              <img class="image" src="/static/images/card/1_b_1.jpg" alt="">
            </div>
            <div class="company-subCompany">
              <div class="name">{{ company.subCompany }}</div>
            </div>
            <ul class="company-info">
              <li class="item" @click="callPhone(2)">
                <div class="text">公司电话：{{ company.phone || '未填写' }}</div>
              </li>
              <li class="item">
                <div class="text">公司行业：{{ company.profession || '未填写' }}</div>
              </li>
              <li class="item">
                <div class="text">经营范围：{{ company.scope || '未填写' }}</div>
              </li>
            </ul>
            <div class="company-logo">
              <div class="icon">
                <img class="image" :src="company.logo2 || logo" alt="">
              </div>
            </div>
          </div>
          <div class="company template">
            <div class="title">公司信息</div>
            <div class="profile" v-if="company.introduce || company.scope">
              <div class="text" v-if="company.introduce">公司简介：{{ company.introduce }}</div>
              <!-- <div class="text" v-if="company.scope">经营范围：{{ company.scope }}</div> -->
            </div>
            <div class="empty" v-else>暂无数据</div>
          </div>
          <div class="honors template">
            <div class="title">公司荣誉</div>
            <ul class="list" v-if="honorList.length > 0">
              <li class="item" v-for="(item, index) in honorList" :key="index">
                <div class="index">{{ index + 1 }}、</div>
                <div class="content">{{ item.text }}</div>
              </li>
            </ul>
            <div class="empty" v-else>暂无数据</div>
          </div>
          <div class="career template">
            <div class="title">事业风采</div>
            <ul class="list" v-if="photoList.length > 0">
              <li class="item" v-for="(item, index) in photoList" :key="index">
                <img class="image" mode="widthFix" :src="item.path" alt="">
              </li>
            </ul>
            <div class="empty" v-else>暂无数据</div>
          </div>
          <div class="video template">
            <div class="title">宣传视频</div>
            <ul class="list" v-if="videoList.length > 0">
              <li class="item" v-for="(item, index) in videoList" :key="index">
                <video :src="item.path" alt="" class="video-box"></video>
              </li>
            </ul>
            <ul class="list" v-if="linkList.length > 0">
              <li class="item" v-for="(item, index) in linkList" :key="index">
                <video :src="item.link" alt="" class="video-box"></video>
              </li>
            </ul>
            <div class="empty" v-if="videoList.length == 0 && linkList.length == 0">暂无数据</div>
          </div>
        </div>
      </div>

      <div class="second-style card-style" v-if="userInfo.style == 1">
        <div class="lbg">
          <img class="image" src="/static/images/second-bg.jpg" alt="">
        </div>
        <div class="wrapper">
          <div class="user">
            <div class="bg">
              <img class="image" src="/static/images/card/2_p_2.jpg" alt="">
            </div>
            <div class="nick">
              <div class="name">{{ userInfo.name || userInfo.nickName || '未知' }}</div>
              <div class="job">{{ company.title }}</div>
            </div>
            <div class="company-name">{{ company.name }}</div>
            <div class="logo">
              <img class="image" :src="company.logo || logo" alt="">
            </div>
            <ul class="info-list">
              <li class="item" @click="callPhone(1)">
                <div class="icon">
                  <img class="image" src="/static/images/icon/phone.png" alt="">
                </div>
                <div class="text">{{ userInfo.mobile || '未填写' }}</div>
              </li>
              <li class="item" @click="setClipboard">
                <div class="icon">
                  <img class="image" src="/static/images/icon/wechat.png" alt="">
                </div>
                <div class="text">{{ userInfo.wx_code || '未填写' }}</div>
              </li>
              <li class="item" @click="openMap">
                <div class="icon">
                  <img class="image" src="/static/images/icon/position.png" alt="">
                </div>
                <div class="text">{{ userInfo.address || '未填写' }}</div>
              </li>
            </ul>
          </div>
          <div class="user">
            <div class="bg">
              <img class="image" src="/static/images/card/2_b_1.jpg" alt="">
            </div>
            <div class="company-subCompany">
              <div class="name">{{ company.subCompany }}</div>
            </div>
            <ul class="company-info">
              <li class="item" @click="callPhone(2)">
                <div class="text">公司电话：{{ company.phone || '未填写' }}</div>
              </li>
              <li class="item">
                <div class="text">公司行业：{{ company.profession || '未填写' }}</div>
              </li>
              <li class="item">
                <div class="text">经营范围：{{ company.scope || '未填写' }}</div>
              </li>
            </ul>
            <div class="company-logo">
              <div class="icon">
                <img class="image" :src="company.logo2 || logo" alt="">
              </div>
            </div>
          </div>
          <div class="company template">
            <div class="title">公司信息</div>
            <div class="profile" v-if="company.introduce || company.scope">
              <div class="text" v-if="company.introduce">公司简介：{{ company.introduce }}</div>
              <!-- <div class="text" v-if="company.scope">经营范围：{{ company.scope }}</div> -->
            </div>
            <div class="empty" v-else>暂无数据</div>
          </div>
          <div class="honors template">
            <div class="title">公司荣誉</div>
            <ul class="list" v-if="honorList.length > 0">
              <li class="item" v-for="(item, index) in honorList" :key="index">
                <div class="index">{{ index + 1 }}、</div>
                <div class="content">{{ item.text }}</div>
              </li>
            </ul>
            <div class="empty" v-else>暂无数据</div>
          </div>
          <div class="career template">
            <div class="title">事业风采</div>
            <ul class="list" v-if="photoList.length > 0">
              <li class="item" v-for="(item, index) in photoList" :key="index">
                <img class="image" mode="widthFix" :src="item.path" alt="">
              </li>
            </ul>
            <div class="empty" v-else>暂无数据</div>
          </div>
          <div class="video template">
            <div class="title">宣传视频</div>
            <ul class="list" v-if="videoList.length > 0">
              <li class="item" v-for="(item, index) in videoList" :key="index">
                <video :src="item.path" alt="" class="video-box"></video>
              </li>
            </ul>
            <ul class="list" v-if="linkList.length > 0">
              <li class="item" v-for="(item, index) in linkList" :key="index">
                <video :src="item.link" alt="" class="video-box"></video>
              </li>
            </ul>
            <div class="empty" v-if="videoList.length == 0 && linkList.length == 0">暂无数据</div>
          </div>
        </div>
      </div>

      <div class="third-style card-style" v-if="userInfo.style == 2">
        <div class="lbg">
          <img class="image" src="/static/images/third-bg.jpg" alt="">
        </div>
        <div class="wrapper">
          <div class="user">
            <div class="bg">
              <img class="image" src="/static/images/card/3_b_1.jpg" alt="">
            </div>
            <div class="nick">
              <div class="name">{{ userInfo.name || userInfo.nickName || '未知' }}</div>
              <div class="job">{{ company.title }}</div>
            </div>
            <div class="company-name">{{ company.name }}</div>
            <div class="logo">
              <img class="image" :src="company.logo || logo" alt="">
            </div>
            <ul class="info-list">
              <li class="item" @click="callPhone(1)">
                <div class="icon">
                  <img class="image" src="/static/images/icon/phone.png" alt="">
                </div>
                <div class="text">{{ userInfo.mobile || '未填写' }}</div>
              </li>
              <li class="item" @click="setClipboard">
                <div class="icon">
                  <img class="image" src="/static/images/icon/wechat.png" alt="">
                </div>
                <div class="text">{{ userInfo.wx_code || '未填写' }}</div>
              </li>
              <li class="item" @click="openMap">
                <div class="icon">
                  <img class="image" src="/static/images/icon/position.png" alt="">
                </div>
                <div class="text">{{ userInfo.address || '未填写' }}</div>
              </li>
            </ul>
          </div>
          <div class="user">
            <div class="bg">
              <img class="image" src="/static/images/card/3_b_1.jpg" alt="">
            </div>
            <div class="company-subCompany">
              <div class="name">{{ company.subCompany }}</div>
            </div>
            <ul class="company-info">
              <li class="item" @click="callPhone(2)">
                <div class="text">公司电话：{{ company.phone || '未填写' }}</div>
              </li>
              <li class="item">
                <div class="text">公司行业：{{ company.profession || '未填写' }}</div>
              </li>
              <li class="item">
                <div class="text">经营范围：{{ company.scope || '未填写' }}</div>
              </li>
            </ul>
            <div class="company-logo">
              <div class="icon">
                <img class="image" :src="company.logo2 || logo" alt="">
              </div>
            </div>
          </div>
          <div class="company template">
            <div class="title">公司信息</div>
            <div class="profile" v-if="company.introduce || company.scope">
              <div class="text" v-if="company.introduce">公司简介：{{ company.introduce }}</div>
              <!-- <div class="text" v-if="company.scope">经营范围：{{ company.scope }}</div> -->
            </div>
            <div class="empty" v-else>暂无数据</div>
          </div>
          <div class="honors template">
            <div class="title">公司荣誉</div>
            <ul class="list" v-if="honorList.length > 0">
              <li class="item" v-for="(item, index) in honorList" :key="index">
                <div class="index">{{ index + 1 }}、</div>
                <div class="content">{{ item.text }}</div>
              </li>
            </ul>
            <div class="empty" v-else>暂无数据</div>
          </div>
          <div class="career template">
            <div class="title">事业风采</div>
            <ul class="list" v-if="photoList.length > 0">
              <li class="item" v-for="(item, index) in photoList" :key="index">
                <img class="image" mode="widthFix" :src="item.path" alt="">
              </li>
            </ul>
            <div class="empty" v-else>暂无数据</div>
          </div>
          <div class="video template">
            <div class="title">宣传视频</div>
            <ul class="list" v-if="videoList.length > 0">
              <li class="item" v-for="(item, index) in videoList" :key="index">
                <video :src="item.path" alt="" class="video-box"></video>
              </li>
            </ul>
            <ul class="list" v-if="linkList.length > 0">
              <li class="item" v-for="(item, index) in linkList" :key="index">
                <video :src="item.link" alt="" class="video-box"></video>
              </li>
            </ul>
            <div class="empty" v-if="videoList.length == 0 && linkList.length == 0">暂无数据</div>
          </div>
        </div>
      </div>

      <div class="fourth-style card-style" v-if="userInfo.style == 3">
        <div class="lbg">
          <img class="image" src="/static/images/fourth-bg.jpg" alt="">
        </div>
        <div class="wrapper">
          <div class="user">
            <div class="bg">
              <img class="image" src="/static/images/card/4_p_2.jpg" alt="">
            </div>
            <div class="nick">
              <div class="name">{{ userInfo.name || userInfo.nickName || '未知' }}</div>
              <div class="job">{{ company.title }}</div>
            </div>
            <div class="company-name">{{ company.name }}</div>
            <div class="logo">
              <img class="image" :src="company.logo || logo" alt="">
            </div>
            <ul class="info-list">
              <li class="item" @click="callPhone(1)">
                <div class="icon">
                  <img class="image" src="/static/images/icon/phone.png" alt="">
                </div>
                <div class="text">{{ userInfo.mobile || '未填写' }}</div>
              </li>
              <li class="item" @click="setClipboard">
                <div class="icon">
                  <img class="image" src="/static/images/icon/wechat.png" alt="">
                </div>
                <div class="text">{{ userInfo.wx_code || '未填写' }}</div>
              </li>
              <li class="item" @click="openMap">
                <div class="icon">
                  <img class="image" src="/static/images/icon/position.png" alt="">
                </div>
                <div class="text">{{ userInfo.address || '未填写' }}</div>
              </li>
            </ul>
          </div>
          <div class="user">
            <div class="bg">
              <img class="image" src="/static/images/card/4_b_1.jpg" alt="">
            </div>
            <div class="company-subCompany">
              <div class="name">{{ company.subCompany }}</div>
            </div>
            <ul class="company-info">
              <li class="item" @click="callPhone(2)">
                <div class="text">公司电话：{{ company.phone || '未填写' }}</div>
              </li>
              <li class="item">
                <div class="text">公司行业：{{ company.profession || '未填写' }}</div>
              </li>
              <li class="item">
                <div class="text">经营范围：{{ company.scope || '未填写' }}</div>
              </li>
            </ul>
            <div class="company-logo">
              <div class="icon">
                <img class="image" :src="company.logo2 || logo" alt="">
              </div>
            </div>
          </div>
          <div class="company template">
            <div class="title">公司信息</div>
            <div class="profile" v-if="company.introduce || company.scope">
              <div class="text" v-if="company.introduce">公司简介：{{ company.introduce }}</div>
              <!-- <div class="text" v-if="company.scope">经营范围：{{ company.scope }}</div> -->
            </div>
            <div class="empty" v-else>暂无数据</div>
          </div>
          <div class="honors template">
            <div class="title">公司荣誉</div>
            <ul class="list" v-if="honorList.length > 0">
              <li class="item" v-for="(item, index) in honorList" :key="index">
                <div class="index">{{ index + 1 }}、</div>
                <div class="content">{{ item.text }}</div>
              </li>
            </ul>
            <div class="empty" v-else>暂无数据</div>
          </div>
          <div class="career template">
            <div class="title">事业风采</div>
            <ul class="list" v-if="photoList.length > 0">
              <li class="item" v-for="(item, index) in photoList" :key="index">
                <img class="image" mode="widthFix" :src="item.path" alt="">
              </li>
            </ul>
            <div class="empty" v-else>暂无数据</div>
          </div>
          <div class="video template">
            <div class="title">宣传视频</div>
            <ul class="list" v-if="videoList.length > 0">
              <li class="item" v-for="(item, index) in videoList" :key="index">
                <video :src="item.path" alt="" class="video-box"></video>
              </li>
            </ul>
            <ul class="list" v-if="linkList.length > 0">
              <li class="item" v-for="(item, index) in linkList" :key="index">
                <video :src="item.link" alt="" class="video-box"></video>
              </li>
            </ul>
            <div class="empty" v-if="videoList.length == 0 && linkList.length == 0">暂无数据</div>
          </div>
        </div>
      </div>

      <div class="bg-music" @click="playMusic">
        <div class="icon" :class="{ 'on': isPlay }">
          <img class="image" src="/static/images/icon/music.png" alt="">
        </div>
      </div>
      <div class="collect-btn" @click="collect">
        <div class="icon">
          <img class="image" src="/static/images/icon/collect.png" alt="">
        </div>
      </div>

      <vFooter></vFooter>
      <div v-show="!isAuth">
        <vModal @onGetUserInfo="onGetUserInfo"></vModal>
      </div>
    </div>
  </div>
</template>

<script>
import vFooter from '@/components/footer.vue'
import vModal from '@/components/modal.vue'

export default {
  data() {
    return {
      isAuth: true,
      logo: '/static/images/icon/avatar.png',
      isPlay: false,
      innerAudioContext: wx.createInnerAudioContext(),
      music: {},
      userInfo: {},
      company: {},
      honorList: {},
      photoList: {},
      videoList: {},
      linkList: {},
      id: '',
      selfInfo: {}
    }
  },

  computed: {
    appId() {
      return this.$store.state.appId
    }
  },

  onShareAppMessage(res) {
    let self = this
    let url = `${self.$confs.shareUrl}?id=${self.selfInfo.id}`
    return {
      title: self.$confs.shareTitle,
      path: url
    }
  },

  components: {
    vFooter,
    vModal
  },

  onLoad(options) {
    this.pid = options.memberId
  },

  methods: {
    onGetUserInfo(e) {
      let userInfo = e.mp.detail['userInfo']
      if (userInfo) {
        this.isAuth = true
        this.$toast.show()
        this.getUserInfo(userInfo)
      } else {
        this.$modal.show('微信登录需要获取您的用户信息，请重新授权')
      }
    },
    getUserInfo(userInfo) {
      let self = this
      let params = {
        pid: self.pid,
        code: wx.getStorageSync('code'),
        avatarUrl: userInfo.avatarUrl,
        nickName: userInfo.nickName
      }
      if (self.appId) params.appId = self.appId
      this.$axios.login(params).then(res => {
        self.$toast.hide()
        if (res.data.code * 1 === 0) {
          let data = res.data.data
          wx.setStorageSync('userInfo', data.member)
          wx.setStorageSync('token', data.token)
          self.getSelfInfo(data.member.id)
          self.setVisitor(data.member.id)
          self.getPersonInfo()
        }
      })
    },
    getSelfInfo(id) {
      let self = this
      self.$toast.show()
      self.$axios.getPersonInfo({ id }).then(res => {
        self.$toast.hide()
        if (0 === res.data.code * 1) {
          let data = res.data.data
          data.photoList.map(item => {
            item.path = `${self.$confs.api}${item.path}`
          })
          data.videoList.map(item => {
            item.path = `${self.$confs.api}${item.path}`
          })
          self.selfInfo = data.member
          self.$store.dispatch('getUserInfo', data.member)
          self.$store.dispatch('getCompany', data.compnay[0])
          self.$store.dispatch('getHonorList', data.honor)
          self.$store.dispatch('getPhotoList', data.photoList)
          self.$store.dispatch('getVideoList', data.videoList)
          self.$store.dispatch('getVideoUrlList', data.linkList)
        }
      })
    },
    login() {
      // 调用登录接口
      let self = this
      wx.login({
        success: result => {
          wx.setStorageSync('code', result.code)
          wx.getSetting({
            success: res => {
              if (res.authSetting['scope.userInfo']) {
                self.$toast.show()
                wx.getUserInfo({
                  success: function(res) {
                    self.getUserInfo(res.userInfo)
                  }
                })
              } else {
                self.isAuth = false
              }
            },
            fail: () => {
              wx.showToast({
                title: '系统提示:网络错误',
                icon: 'none',
                duration: 1500
              })
            }
          })
        },
        fail: () => {
          wx.showToast({
            title: '系统提示:网络错误',
            icon: 'none',
            duration: 1500
          })
        }
      })
    },
    getPersonInfo() {
      let self = this
      self.$toast.show()
      self.$axios.getPersonInfo({ id: self.pid }).then(res => {
        self.$toast.hide()
        if (0 === res.data.code * 1) {
          let data = res.data.data

          self.logo = `${self.$confs.api}api/code/getCode?path=${
            self.$confs.shareUrl
          }&memberId=${data.member.id}`

          data.photoList.map(item => {
            item.path = `${self.$confs.api}${item.path}`
          })
          data.videoList.map(item => {
            item.path = `${self.$confs.api}${item.path}`
          })

          self.userInfo = data.member
          self.company = data.compnay[0]
          self.honorList = data.honor
          self.photoList = data.photoList
          self.videoList = data.videoList
          self.linkList = data.linkList
          self.music = data.music
          self.autoMusic()
        }
      })
    },
    autoMusic() {
      this.innerAudioContext.src = `${this.$confs.api}${this.music.path}`
      this.innerAudioContext.loop = true
      if (this.userInfo.music_flag == 1) {
        this.isPlay = true
        this.innerAudioContext.play()
      }
    },
    playMusic() {
      if (this.isPlay) {
        this.isPlay = false
        this.innerAudioContext.pause()
      } else {
        this.isPlay = true
        this.innerAudioContext.play()
      }
    },
    collect() {
      let self = this
      self.$toast.show('收藏中...')
      self.$axios
        .setCollection({
          id: self.id
        })
        .then(res => {
          self.$toast.hide()
          let data = res.data
          if (0 === data.code * 1) {
            wx.showToast({
              title: '收藏成功',
              icon: 'success',
              duration: 1500
            })
          } else {
            wx.showToast({
              title: '收藏失败',
              icon: 'none',
              duration: 1500
            })
          }
        })
    },
    callPhone(index) {
      let self = this
      if (index === 1) {
        if (self.userInfo.mobile) {
          wx.makePhoneCall({
            phoneNumber: self.userInfo.mobile
          })
        } else {
          self.$modal.show('暂未设置')
        }
      }
      if (index === 2) {
        if (self.company.phone) {
          wx.makePhoneCall({
            phoneNumber: self.company.phone
          })
        } else {
          self.$modal.show('暂未设置')
        }
      }
    },
    setClipboard() {
      let self = this
      wx.setClipboardData({
        data: self.userInfo.wx_code,
        success(res) {
          self.$toast.show({
            title: '复制成功',
            icon: 'none',
            duration: 1500
          })
        }
      })
    },
    openMap() {
      let self = this
      this.$authorize({
        auth: 'scope.userLocation',
        content: '需要获取您的地理位置，请确认授权，否则地图定位功能将无法使用'
      })
        .then(res => {
          let { lat, lng } = self.userInfo
          if (lat && lng) {
            wx.openLocation({
              latitude: Number(lat),
              longitude: Number(lng)
            })
          } else {
            self.$modal.show('暂未设置地理位置')
          }
        })
        .catch(res => {
          self.$toast.show({
            title: '获取失败',
            icon: 'none',
            duration: 1500
          })
        })
    },
    setVisitor(id) {
      let self = this
      self.$axios.setVisitor({
        memberId: id,
        visitorId: self.pid
      })
    }
  },

  mounted() {
    if (this.$root.$mp.query.id) this.pid = this.$root.$mp.query.id
    this.login()
  }
}
</script>

<style lang="scss">
@import '@/pages/index/index.scss';
</style>
